package ;

import easelhx.display.Bitmap;
import easelhx.display.Container;
import easelhx.filters.ColorMatrix;
import easelhx.filters.ColorMatrixFilter;
import easelhx.utils.Ticker;
import js.JQuery;
import js.Lib;
import preloadjs.PreloadJS;

/**
 * ...
 * @author 
 */

class TransformExample extends Example
{
	private var imageContainer:Container;
	private var loader:PreloadJS;
	private var image_width:Float;
	private var image_height:Float;
	private var manifest:Dynamic;
	private var images:Array<Dynamic>;

	public function new() 
	{
		super();
	}
	
	override public function run():Void 
	{
		super.run();
		
		//new JQuery('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
		
		new JQuery('head').append('<link type="text/css" href="assets/css/dark-hive/jquery-ui-1.8.18.custom.css" rel="stylesheet" />');
		new JQuery('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>');
		new JQuery('head').append('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>');
		
		new JQuery('head').append('<style type="text/css">body { background-color:#333; } .loader {	width: 100%;height: 50px;position: absolute;text-align:center;margin-top: 250px;background: url("loader.gif") no-repeat;background-position: 50% 50%;display: block !important;	}</style>');

		new JQuery("body").html('<div id="loader"></div><div width="960" height="400" style="position:absolute; "><div id="slider" class="transformSlider"></div><label id="amount" style="color:#777">Amount</label></div>');
		
		Lib.document.getElementById("loader").className = "loader";

		imageContainer = new Container();

		images = new Array<Dynamic>();

		image_width = 149;
		image_height = 370;
		
		manifest = [
			{src:"assets/image_1_1.png", id:"image0"},
			{src:"assets/image_1_2.png", id:"image1"},
			{src:"assets/image_1_3.png", id:"image2"},
			{src:"assets/image_1_4.png", id:"image3"}

		];

		loader = new PreloadJS();
		loader.useXHR = false;  // XHR loading is not reliable when running locally.
		loader.onProgress = handleProgress;
		loader.onComplete = handleComplete;
		loader.onFileLoad = handleFileLoad;
		loader.loadManifest(manifest);

		stage.addChild(imageContainer);
		Ticker.addListener(this);
	}
	
	private function stop() : Void
	{
		Ticker.removeListener(this);
	}

	private function handleProgress() : Void
	{
		//untyped console.log('enter');
	}

	private function handleFileLoad(event) : Void
	{
		images.push(event);
	}

	private function handleComplete() : Void
	{
		//untyped $(".transformSlider").slider({
			//value: 0,
			//min: -30,
			//max: 30,
			//step: 1,
			//slide:handleChange,
			//change:handleChange
		//});
		
		Lib.document.getElementById("loader").className = "";
		var l = images.length;
		for(i in 0...l) {
			var id = images[i].id;
			var bmp = new Bitmap(loader.getResult(id).result);
			imageContainer.addChild(bmp);
		}
		displayImages();
		handleChange();
	}

	private function displayImages() : Void
	{
		var l = images.length;
		for(i in 0...l) {
			var bmp:Bitmap = cast imageContainer.getChildAt(i);
			bmp.cache(0,0, image_width, image_height);
			bmp.x = (image_width) * i;
			bmp.snapToPixel = true;
		}

		imageContainer.x = Std.int(canvas.width - (image_width*l)) >> 1;
		imageContainer.y = Std.int(canvas.height - image_height) >> 1;
		
		stage.update();
	}

	private function handleChange() : Void
	{
		//var value:Int = untyped $(this).slider("option", "value");
		//untyped $( "#amount" ).text("Amount:"+value);
		var value = 10;
		if (value == 0) { return; }
		var l = images.length;
		for(i in 0...l) {
			var bmp1:Bitmap = cast imageContainer.getChildAt(i);

			if (i%2 == 0) {
				bmp1.skewY = value;
			} else {
				bmp1.skewY = -1*value;
				bmp1.y = -(150) * Math.sin(bmp1.skewY / 180 * Math.PI);
			}

			bmp1.x = ((image_width - 1)*i) * Math.cos(bmp1.skewY/180*Math.PI);
			bmp1.filters = [getColorMatrixFilter(bmp1.skewY)];
			bmp1.snapToPixel = true;
			bmp1.updateCache();
		}

		var _scale = (value > 0) ? 1/value * 20 : -1*(1/value * 20);
		imageContainer.rotation = (value > 0) ? value>>1 : - 1*value>>1;
		imageContainer.scaleX = imageContainer.scaleY = (_scale <= 1) ? _scale : 1;

		imageContainer.x = Std.int(canvas.width - (image_width * l)) >> 1;
		imageContainer.y = Std.int(canvas.height - image_height) >> 1;

		stage.update();
	}

	private function getColorMatrixFilter(value:Float) : ColorMatrixFilter
	{
		var cm = new ColorMatrix();
		cm.adjustBrightness(value*0.75);
		return new ColorMatrixFilter(cm);
	}

	private function tick() : Void
	{
		stage.update();
	}
	
}